<template>
	<view>
		<!-- <cu-custom bgColor="bg-white" @click="RedirectToHome()" :isBack="false">
			<block slot="content">奖品中心</block>
		</cu-custom> -->
		<uni-view data-v-87daf598="" @click="RedirectToHome()" class="cu-bar fixed bg-white" style="height: 45px; padding-top: 0px;">
			<uni-text data-v-87daf598="" class="cuIcon-back" style="margin-left: 10px;"><span></span></uni-text>
			<uni-view data-v-87daf598="" class="content" style="top: 0px;">奖品中心</uni-view>
		</uni-view>
		<view class="qui-card radius5" style="margin: 15rpx;margin-top: 50px;">
			<view class="qui-grids column4 pt30 pb30 tc">
				
			<navigator url="/pages/my/lipinDetail" class="qui-grid">
					
					<view>
						<image src="/static/images/icon_grid01.png" class="img54"></image>
					</view>
					<view class="tc fs22">全部</view>
				</navigator>
				<!-- <navigator url="/pages/my/lipinDetail?type=1" class="qui-grid">
					<view>
						<image src="/static/images/icon_grid02.png" class="img54"></image>
					</view>
					<view class="tc fs22">零钱</view>
				</navigator> -->
				<navigator url="/pages/my/lipinDetail?type=2" class="qui-grid">
					<view>
						<image src="/static/images/icon_grid03.png" class="img54"></image>
					</view>
					<view class="tc fs22">积分</view>
				</navigator>
				<navigator url="/pages/my/lipinDetail?type=4" class="qui-grid">
					<view>
						<image src="/static/images/icon_grid04.png" class="img54"></image>
					</view>
					<view class="tc fs22">优惠券</view>
				</navigator>
				<navigator url="/pages/my/lipinDetail?type=3" class="qui-grid ">
					<view>
						<image src="/static/images/icon_grid05.png" class="img54"></image>
					</view>
					<view class="tc fs22">礼品</view>
				</navigator>
				<navigator url="/pages/my/lipinDetail?type=1" class="qui-grid mt20">
					<view>
						<image src="/static/images/icon_grid06.png" class="img54"></image>
					</view>
					<view class="tc fs22">红包</view>
				</navigator>
				
			</view>
		</view>

		<view class="flex padding justify-between">
			<view class="cardtab">
				<text @click="changeTab(1)" :class="{'active':active===1}">全部</text>
				<text @click="changeTab(2)" :class="{'active':active===2}">即将失效({{loseEfficacySour.length}})</text>
			</view>
		</view>

		<view v-if="active===1">
			<view v-for="(item,index) in pageSours" :Key="index" v-if="!isIoseEfficacy(item.ActivityEndTime)">
				<view class="qui-cells radius5" style="margin: 15rpx;">
					<view class="qui-cell">
						<view class="cell-bd">
							<view class="fs22">
								{{item.Flag==1?"抽奖时间":(item.Flag==2?"领取时间":"失效时间")}}
								{{item.TitleTime}}</view>
						</view>
						<view class="cell-ft">
							<view class="fs24 text-black" :class="[{'received':item.Flag==2},{'receiv':item.Flag!=2}]">
								{{item.Flag==1?"未领取":(item.Flag==2?"已领取":"已失效")}}</view>
						</view>
					</view>

					<navigator v-for="(nav,index) in item.Items" :Key="index" :url="navClickUrl(nav.ActivityPrizeTypeId)" class="qui-cell">
						<view class="cell-hd round" :class="[{'zhifubao_flag':nav.ActivityPrizeTypeId==1},
									{'jifen_flag':nav.ActivityPrizeTypeId==2},
									{'jifen_flag':nav.ActivityPrizeTypeId==3},
									{'jifen_flag':nav.ActivityPrizeTypeId==4}]">
						</view>
						<view class="cell-bd">
						<view class="fs28" >
							<text v-if="nav.ActivityPrizeCode=='integral'" v-text="nav.ResultValue+'积分'"></text>
							<text v-if="nav.ActivityPrizeCode=='redpacket'" v-text="nav.ResultValue+'元'"></text>
							<text v-if="nav.ActivityPrizeCode=='material'" v-text="'礼品-'+nav.GiftName"></text>
							<text v-if="nav.ActivityPrizeCode=='card'" v-text="'代金券-'+nav.ProductName"></text>
						</view>
							<view class="fs20">{{
									nav.ActivityPrizeTypeId==1?`${item.Flag!=2?"领取后直接发放":"已发放"}到微信零钱包`:
									nav.ActivityPrizeTypeId==2?`${item.Flag!=2?"领取后直接发放":"已发放"}到个人积分钱包`:
									nav.ActivityPrizeTypeId==3?`${item.Flag!=2 || (nav.DetailsArea||"")!=""?"领取后系统将为你发货":"填写收货地址后，商家将为你发货"}`:
									`${item.Flag!=2?"领取后直接发放":"已领取"}到个人中心卡包`
								}}
								<view class="getbtn getbtn1 write_address" v-if="item.Flag==2 && nav.ActivityPrizeTypeId==3  && (nav.DetailsArea||'')==''" @tap.stop="writeAddress(nav.Id)">填写地址</view>
							</view>
						</view>
					</navigator>

					<view class="qui-cell" v-if="item.Flag==1">
						<view class="cell-bd tr">
							<view class="getbtn" @tap="receiveClick(index,item.ActivityId)">立即领取</view>
							<!-- @tap="showModal" data-target="Modal" -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="active===2">
			<view v-for="(item,index) in loseEfficacySour" :Key="index">
				<view class="qui-cells radius5" style="margin: 15rpx;">
					<view class="qui-cell">
						<view class="cell-bd">
							<view class="fs22">
								{{item.Flag==1?"抽奖时间":(item.Flag==2?"领取时间":"失效时间")}}
								{{item.TitleTime}}
								<text class="fs20 text-orange">{{`(${item.expiration}天后过期)`}}</text>
							</view>
						</view>
						<view class="cell-ft">
							<view class="fs24 text-black" :class="[{'received':item.Flag==2},{'receiv':item.Flag!=2}]">
								{{item.Flag==1?"未领取":(item.Flag==2?"已领取":"已失效")}}</view>
						</view>
					</view>

					<navigator v-for="(nav,index) in item.Items" :Key="index" url="/pages/my/lipinDetail" class="qui-cell">
						<view class="cell-hd round" :class="[{'zhifubao_flag':nav.ActivityPrizeTypeId==1},
									{'jifen_flag':nav.ActivityPrizeTypeId==2},
									{'jifen_flag':nav.ActivityPrizeTypeId==3},
									{'jifen_flag':nav.ActivityPrizeTypeId==4}]">
						</view>
						<view class="cell-bd">
							<view class="fs28" >
								<text v-if="nav.ActivityPrizeCode=='integral'" v-text="nav.ResultValue+'积分'"></text>
								<text v-if="nav.ActivityPrizeCode=='redpacket'" v-text="nav.ResultValue+'元'"></text>
								<text v-if="nav.ActivityPrizeCode=='material'" v-text="nav.GiftName"></text>
								<text v-if="nav.ActivityPrizeCode=='card'" v-text="nav.ProductName"></text>
							</view>
							<view class="fs20">{{
									nav.ActivityPrizeTypeId==1?`${item.Flag!=2?"领取后直接发放":"已发放"}到微信零钱包`:
									nav.ActivityPrizeTypeId==2?`${item.Flag!=2?"领取后直接发放":"已发放"}到个人积分钱包`:
									nav.ActivityPrizeTypeId==3?`${item.Flag!=2 || (nav.DetailsArea||"")!=""?"领取后系统将为你发货":"填写收货地址后，商家将为你发货"}`:
									`${item.Flag!=2?"领取后直接发放":"已领取"}到个人中心卡包`
								}}
								<view class="getbtn getbtn1 write_address" v-if="item.Flag==2 && nav.ActivityPrizeTypeId==3 && (nav.DetailsArea||'')==''" @tap.stop="writeAddress(nav.Id)">填写地址</view>
							</view>
						</view>
					</navigator>

					<view class="qui-cell" v-if="item.Flag==1">
						<view class="cell-bd tr">
							<view class="getbtn" @tap="receiveClick(index,item.ActivityId)">立即领取</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import base from 'utils/base.js';
	import tools from 'utils/tools.js';
	export default {
		data() {
			return {
				active: 1,
				modalName: null,
				imgurl: this.$imgurl,
				firstDbSours: [], //接口返回数据
				pageSours: [], //页面数据
				loseEfficacySour: [], //失效数据
			}
		},
		mounted() {
			this.GetInit();
		},
		methods: {
			changeTab(index) {
				this.active = index
			},
			mdInfo() {
				uni.navigateTo({
					url: '/pages/home/mdInfoEdit'
				})
			},
			showModal(e) {
				this.modalName = 'Modal'
			},
			hideModal(e) {
				this.modalName = null
			},
			//主界面数据展示、列表切换条件 1红包 2积分 3实物
			lodingInitPage(type) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});

				var _this = this;

				//获取用户信息
				let globalData = getApp().globalData;
				let userInfo = globalData.UserInfo;

				var requstData = {
					"UserId": userInfo.UserID,
					"ActivityPrizeType": type || 0,
					"PageIndex": 0,
					"PageSize": 100
				}
				
				let params = {
					hideLoading: true,
					type: 'POST',
					url: '/Activity/GetActivityPrizeHistoryListByUserId',
					data: requstData,
					sCallback: function(response) {
						uni.hideLoading();
						if (response.Success) {
							var thisSour = response.Data;

							if ((thisSour || null) == null) return false;

							//赋值原始数据
							_this.firstDbSours = thisSour;

							//序列化页面所需数据
							_this.serverlizePageSour(thisSour);

						} else {
							uni.showToast({
								icon: 'none',
								title: response.Msg
							});
						}
					}
				};
				base.ActivityRequest(params);
			},
			//序列化页面数据
			serverlizePageSour(thisSour) {
				var _this = this;
				//获取当前时间
				var dateNow = new Date();
				thisSour.forEach(function(item) {
					var sourObj = {};
					var array = [];
					var activityEnd = new Date(item.ActivityEndTime);
					var times = activityEnd.getTime() - dateNow.getTime();
					//判断是否已失效
					if (times < 0) {
						//判断是否存在
						var index = _this.pageSours.findIndex(s => s.Flag == 3 && s.ActivityId == item.ActivityId &&
							s.TitleTime == item.ActivityEndTime);
						if (index < 0) {
							sourObj.TitleTime = item.ActivityEndTime;
							sourObj.ActivityEndTime = item.ActivityEndTime;
							sourObj.Flag = 3;
							sourObj.ActivityId = item.ActivityId;
							array.push(item);
							sourObj.Items = array;
							_this.pageSours.push(sourObj);
						} else {
							_this.pageSours[index].Items.push(item);
						}
					} else {
						//查询所有已领取数据
						if ((item.GetCreateTime || "0001-01-01 00:00:00") != "0001-01-01 00:00:00") {
							//判断是否存在
							var index = _this.pageSours.findIndex(s => s.Flag == 2 && s.ActivityId == item.ActivityId && s.TitleTime ==
								item.GetCreateTime);
							if (index < 0) {
								sourObj.TitleTime = item.GetCreateTime;
								sourObj.ActivityEndTime = item.ActivityEndTime;
								sourObj.Flag = 2;
								sourObj.ActivityId = item.ActivityId;
								array.push(item);
								sourObj.Items = array;
								_this.pageSours.push(sourObj);
							} else {
								_this.pageSours[index].Items.push(item);
							}
						}
						//查询未领取数据
						else {
							//判断是否存在
							var index = _this.pageSours.findIndex(s => s.Flag == 1 && s.ActivityId == item.ActivityId && s.TitleTime ==
								item.CreateTime);
							if (index < 0) {
								sourObj.TitleTime = item.CreateTime;
								sourObj.ActivityEndTime = item.ActivityEndTime;
								sourObj.Flag = 1;
								sourObj.ActivityId = item.ActivityId;
								array.push(item);
								sourObj.Items = array;
								_this.pageSours.push(sourObj);
							} else {
								_this.pageSours[index].Items.push(item);
							}
						}
					}
				});
				console.log(_this.pageSours);

				//提取即将失效数据
				_this.pageSours.forEach(function(item) {
					//未领取即将失效
					if ((item.GetCreateTime || "0001-01-01 00:00:00") != "0001-01-01 00:00:00") {
						var dateNow = new Date();
						var activityEnd = new Date(item.ActivityEndTime);
						var times = activityEnd.getTime() - dateNow.getTime();
						if (times > 0 && times <= 259200000) {
							var day = parseInt(times / (1000 * 60 * 60 * 24));
							item.expiration = day;
							_this.loseEfficacySour.push(item);
						}
					}
				});
			},
			//点击填写地址
			writeAddress(id) {
				uni.navigateTo({
					url: `/pages/my/setting/address?businesstype=lipin&activityprizehistoryid=${id}`
				});
			},
			//点击立即领取
			receiveClick(index, ActivityId) {
				var _this = this;
				uni.showLoading({
					title: '加载中',
					mask: true
				});

				//获取首页放入缓存的代发OpenId
				var openId = uni.getStorageSync("daifa_openId") || "";

				//获取所有的奖项
				var sour = _this.active == 1 ? _this.pageSours : _this.loseEfficacySour;
				var items = sour[index].Items;
				var Activity_Prize_HistoryIds = "";
				items.forEach(function(item) {
					Activity_Prize_HistoryIds += `${item.Id},`;
				});
				Activity_Prize_HistoryIds = Activity_Prize_HistoryIds.toString().slice(0, -1);

				//获取点击领取的所有
				var input = {
					"ActivityPrizeHistoryIds": Activity_Prize_HistoryIds,
					"ActivityId": ActivityId,
					"DaiFaOpenId": openId
				};

				let params = {
					hideLoading: true,
					type: 'POST',
					url: '/Activity/DZPGiftToIssue',
					data: input,
					sCallback: function(response) {
						uni.hideLoading();
						if (response.Success) {
							uni.showToast({
								icon: "success",
								title: "领取成功！",
							})
							_this.firstDbSours = [];
							_this.pageSours = [];
							_this.loseEfficacySour = [];
							_this.lodingInitPage(0);
						} else {
							uni.showToast({
								icon: 'none',
								title: response.Msg
							});
						}
					}
				};
				base.ActivityRequest(params);
			},
			//获取代发OpenId
			GetInit() {
				var _this = this;

				//写入代发OpenId
				var index = location.href.indexOf("openId");
				if (index != -1) {
					uni.setStorageSync('daifa_openId', tools.getQueryVariable("openId"));
					_this.lodingInitPage(0);
				} else {
					//根据用户OpenId获取AppId
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					//获取用户信息
					let globalData = getApp().globalData;
					let userInfo = globalData.UserInfo;

					let params = {
						hideLoading: true,
						type: 'Get',
						url: `/User/GetUserInfoByOpenId`,
						data: {
							"openId": userInfo.OpenID
						},
						sCallback: function(response) {
							uni.hideLoading();
							var locationUrl = location.href.toString();
							
							if (response.DaiFaAppId != "") {
								//跳转获取OpenId
								var custId = userInfo.CustID;
								window.location.href = "http://wxcenter.pinguanyun.cn/connect/oauth2/authorize?ZpAppId=Winmobi4_" + custId +
									"&scope=snsapi_base&state=" + custId + "&ReturnUrl=" + locationUrl;
							} else {
								_this.lodingInitPage(0);
							}
						}
					};
					base.ActivityRequest(params);
				}
			},
			//跳转主界面
			RedirectToHome() {
				uni.reLaunch({
					url: `/pages/my/my`
				});
			},
		},
		computed: {
			isIoseEfficacy() {
				return function(ActivityEndTime) {
					var dateNow = new Date();
					var activityEnd = new Date(ActivityEndTime);
					var times = activityEnd.getTime() - dateNow.getTime();
					if (times > 0 && times <= 259200000)
						return true;
					else
						return false;
				}
			},
			navClickUrl() {
				return function(ActivityPrizeTypeId) {
					switch (ActivityPrizeTypeId) {
						case 1:
							return "/pages/my/lipinDetail";
						case 2:
							return "/pages/my/积分";
						case 3:
							return "/pages/my/lipin";
						case 4:
							return "/pages/my/代金券";
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.img54 {
		width: 54rpx;
		height: 54rpx;
	}

	.write_address {
		position: absolute;
		right: 10px;
	}

	.received {
		color: #00CC66;
	}

	.receiv {
		color: #999999;
	}

	.zhifubao_flag {
		background: #408ce2;
	}

	.jifen_flag {
		background: #f9194f;
	}

	.youhuiquan_flag {
		background: #f04900;
	}

	.lipin_flag {
		background: #8367fa;
	}

	.round {
		width: 12rpx;
		height: 12rpx;
		background: #6ab19a;
		display: inline-block;
		margin-top: -40rpx;
	}

	.getbtn {
		padding: 0 25rpx;
		height: 50rpx;
		line-height: 50rpx;
		background-color: #ff5e1f;
		border-radius: 25rpx;
		font-size: 24rpx;
		color: #ffffff;
		text-align: center;
		display: inline-block;
	}

	.getbtn1 {
		background: none;
		border: solid 1rpx #ff641f;
		color: #ff5e1f;
	}

	.cardtab {
		text {
			font-size: 28upx;
			color: #585858;
			padding: 30upx;
		}

		.active {
			position: relative;
			font-size: 28upx;
			color: #1a1a1a;
			font-weight: 600;

			&:before {
				position: absolute;
				content: '';
				display: inline-block;
				width: 63upx;
				margin: 0 auto;
				left: 0;
				right: 0;
				bottom: 0;
				height: 6upx;
				background-color: #ff3a1a;
			}
		}
	}

	.cu-form-groups .picker {
		flex: 1;
	}

	.cu-form-groups>.title {
		padding: 30rpx;
		padding-bottom: 0px;
	}

	.cu-form-group .title,
	.uni-input-placeholder {
		font-size: 28rpx;
	}
</style>
